<template>
	<navbar title="确认订单" :isBack="true"></navbar>
	<view class="content">
		<view class="" style="width: 100%;padding: 20rpx;border-radius: 10rpx;background-color: white;display: flex;">
			<view class=""
				>
				<image :src="Info.banner" style="width: 256rpx;height: 153rpx;border-radius: 10rpx;margin-right: 10rpx;" mode="aspectFill"></image>
			</view>
			<view class="" style="width: 100%;display: flex;flex-direction: column;justify-content: space-between;">
				<view class="" style="font-weight: bold;">
					{{Info.name}}
				</view>
				<view class=""
					style="display: flex;justify-content: space-between;align-items: center;">
					<view class="" style="color: #F00505;">
						<span style="font-size: 24rpx;line-height: 1.5;">￥</span>
						<span style="font-size: 32rpx;">{{Info.price}}</span>
					</view>
					<view class="">
						<!-- 	<view class="" style="width: 132rpx;border: 1rpx solid #BEBEBE;border-radius: 10rpx;display: flex;height: 36rpx;">
								<view class="" style="flex: 1;border-right: 1rpx solid #BEBEBE;display: flex;justify-content: center;align-items: center;">
									-
								</view>
								<view class="" style="flex: 2;overflow: hidden;display: flex;justify-content: center;">
									<input type="number" :value="1" style="height: 36rpx;flex: 2;">
								</view>
								<view class="" style="flex: 1;border-left: 1rpx solid #BEBEBE;display: flex;justify-content: center;align-items: center;">
									+
								</view>
							</view> -->
						<u-number-box v-model="numberBox" @change="numberBoxChange"></u-number-box>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="rank"
			style="margin-top: 20rpx;background-color: white;width: 100%;border-radius: 20rpx;padding: 20rpx 0rpx 20rpx 20rpx;">
			<view class="" style="display: flex;justify-content: space-between;align-items: center;">
				<view class="" style="font-weight: bold;">
					是否代客下单
				</view>
				<view class="">
					<u-checkbox v-model="payParam.is_dk" shape="circle" active-color="#405EEC"></u-checkbox>
				</view>
			</view>
			<view class="" v-if="payParam.is_dk" style="display: flex;justify-content: space-between;align-items: center;margin-top: 50rpx;padding-right: 30rpx;">
				<view class="">
					手机号码
				</view>
				<input type="tel" placeholder="请输入手机号码" v-model="payParam.dk_mobile" style="text-align: right;">
			</view>
		</view>

	</view>
	<view class=""
		style="position: fixed;bottom: 0;width: 750rpx;background-color: white;box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(36,37,38,0.15);padding: 30rpx;display: flex;justify-content: space-between;align-items: flex-end;">
		<view class="" style="font-weight: bold;">
			<span style="font-size: 24rpx;line-height: 1.5;">合计：</span><span
				style="font-size: 24rpx;line-height: 1.5;">￥</span><span style="font-size: 32rpx;">{{price}}</span>
		</view>
		<view class="" @tap="pay"
			style="width: 480rpx;height: 84rpx;display: flex;justify-content: center;align-items: center;border-radius: 52rpx;background-color: #405EEC;color: white;">
			立即支付
		</view>
	</view>
	<view class="">
		<u-modal v-model="modalShow" title="确定要删除此商品吗？" content="   " show-cancel-button @confirm="modalConfirm" @cancel="modalCancel"></u-modal>
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShareAppMessage, onShareTimeline, onReachBottom } from '@dcloudio/uni-app'
	import { reactive, ref } from 'vue'
		import { orderTrue,addOrder } from '@/service/api/index'
	import tools from '@/utils/tools'
	const numberBox = ref(1)
	const checked = ref(false)
	const price = ref<number>(0)//总价
	const modalShow = ref(false)
	const param = ref({}) as any
	const payParam = reactive({
		fid:"",
		id:"",
		num:1,
		is_dk:0,
		dk_mobile:""
	})
	const rank = ref(0)
	const order_id = ref("")
	const Info = ref({}) as any
	onLoad((opt)=>{
		console.log(JSON.parse(opt.param))
		param.value = JSON.parse(opt.param);
		payParam.fid = param.value.fid;
		payParam.id = param.value.id;
		getData()
	})
	const getData = async()=>{
		const res = await orderTrue(param.value);
		Info.value = res.msg.goods;
		price.value = Info.value.price;
		rank.value = res.msg.rank;
	}
	const numberBoxChange = (val : any) => {
		payParam.num = val.value;
		if(val.value == 0){
			modalShow.value = true;
			return;
		}
	 	price.value  = 3000 * val.value;
		console.log(val)
	}
	//确认删除
	const modalConfirm = ()=>{
		price.value = 0;
		modalShow.value = false;
		uni.navigateBack();
	}
	//取消删除
	const modalCancel = ()=>{
		numberBox.value = 1;
		modalShow.value = false;
	}
	const pay = async()=>{
		//添加订单
		
		payParam.is_dk = payParam.is_dk ? 1 :0;
		
		const res = await addOrder(payParam)
		if(res.code == 1){
			order_id.value= res.msg.id;
			tools.navTo('/pagesA/pay/cash?order_id=' + order_id.value,4)
		}else{
			tools.showToast(res.msg);
		}
		
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 20rpx 30rpx;
		background-color: #F9F9F9;
		min-height: calc(100vh - 96px);
	}
</style>